<template>
  <el-row>
    <el-col :span="18" class="main-content">
      <div class="card-container">
        <el-card style="width: 100%">
          <!-- 标题显示 -->
          <template #header>
            <div class="card-header">
              <span>{{ blogInfo.title }}</span>
            </div>
          </template>
          <!-- 文章基本信息 -->
          <el-row>
            <el-col :span="24">
              <el-descriptions :column="10" size="small">
                <el-descriptions-item label="作者">
                  {{ blogInfo.author }}
                </el-descriptions-item>
                <el-descriptions-item label="发布时间">
                  {{ blogInfo.publishTime }}
                </el-descriptions-item>
                <el-descriptions-item label="阅读量">
                  {{ blogInfo.readNum }}
                </el-descriptions-item>
                <el-descriptions-item label="标签">
                  <el-tag v-for="tag in blogInfo.tag" :key="tag" size="small">
                    {{ tag }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="点赞数">
                  {{ blogInfo.likeNum }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
          <!-- 简介信息统计栏 -->
          <!-- <el-row>
            <el-col :span='24'>
              <quick-section />
            </el-col>
          </el-row> -->
          <!-- 滚动信息栏 -->
          <el-row>
            <el-col :span="24">
              <u-notice-bar vertical :data="noticeList" />
            </el-col>
          </el-row>
          <el-divider content-position="center"> 正文 </el-divider>
          <!-- 博客内容栏 -->
          <el-row>
            <el-col :span="24" class="preview-col">
              <el-scrollbar id="preview-container" ref="scrollbarRef" height="1000px">
                <iz-preview-content :editor-id="editorId" :model-value="text" />
              </el-scrollbar>
            </el-col>
          </el-row>
          <!-- 页脚区域 -->
          <!-- <template #footer>
          </template> -->
        </el-card>
        <el-divider />
        <el-card>
          <!-- 评论区 -->
          <my-comment />
        </el-card>
      </div>
    </el-col>
    <el-col :span="6" class="main-aside-right">
      <el-affix target=".main-aside-right" :offset="50">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-text>目录</el-text>
            </div>
          </template>
          <el-row>
            <el-col :span="24">
              <!-- <iz-catalog
              :editor-id='editorId'
              @scroll-to='scrollTo' /> -->
              <u-anchor container=".preview-col" scroll=".el-scrollbar__wrap" />
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <el-text>热门标签</el-text>
            </div>
          </template>
          <u-search :config="config" style="display: flex" @submit="submit" />
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <el-text>热门标签</el-text>
            </div>
          </template>
          <u-search :config="config" style="display: flex" @submit="submit" />
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <el-text>热门标签</el-text>
            </div>
          </template>
          <u-search :config="config" style="display: flex" @submit="submit" />
          <u-search :config="config" style="display: flex" @submit="submit" />
          <u-search :config="config" style="display: flex" @submit="submit" />
          <u-search :config="config" style="display: flex" @submit="submit" />
          <u-search :config="config" style="display: flex" @submit="submit" />
          <u-search :config="config" style="display: flex" @submit="submit" />
        </el-card>
      </el-affix>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
  import 'md-editor-v3/lib/style.css'
  import IzPreviewContent from '@/components/common/preview-content/index.vue'
  import MyComment from '@/components/common/comment/index.vue'
  import 'md-editor-v3/lib/style.css'
  import { ref } from 'vue'
  import { MARKDOWN_EDITOR_CONTENT } from '@/constants/md-editor'
  import { UAnchor, UNoticeBar, SearchConfig, USearch } from 'undraw-ui'
  const editorId = 'demo-preview'

  const blogInfo = {
    title: 'Vite的正确使用方法',
    author: 'banyunjian',
    publishTime: '2024/03/25 12:23:30',
    readNum: '3k+',
    tag: ['Java订阅'],
    likeNum: '30',
  }
  const text = ref(MARKDOWN_EDITOR_CONTENT)
  // const scrollElement = ref('#preview-container');
  // const scrollElement = ref(document.documentElement);

  // ==================================滚动通知=========================================
  const noticeList = ref([
    '🔥有一条深海鱼在往深处游，游着游着它就哭了，因为它觉得压力好大。',
    '请手机自我检讨一下，为什么总拉着我一起熬夜？',
    '历史老师：你为什么交白卷？我：我怕我会篡改历史',
    '今天天气很好，在房间里宅久了，准备去客厅散散心。',
  ])

  // ====================================检索框============================================
  const config = ref<SearchConfig>({
    search: '', // 可选输入框默认值
    keywords: ['学习', 'Java', 'Spring', 'SprngBoot', 'SpringCloud'], // 搜索框关键字滚动
    hotSearchList: ['学习', 'Java', 'Spring', 'SprngBoot', 'SpringCloud'], // top10 热门搜索 最多显示10条数据
  })

  const submit = (val: string) => {
    console.log(val)
    window.open('/all?keyword=' + val)
  }
  const scrollbarRef = ref()
  const scrollTo = (id: string) => {
    const el = document.getElementById(id)
    if (el) {
      scrollbarRef.value.scrollTo({
        top: el.offsetTop - 20,
        behavior: 'smooth',
      })
    }
  }
</script>
<style scoped lang="scss">
  // .main-box{
  //   display: flex;
  //   flex-direction: row;
  // }
  // .content-box{
  //   display: flex;
  //   flex: 3;
  // }
  // .aside-box{
  //   display: flex;
  //   flex: 1;
  // }
  .main-content {
    padding: 0px;
  }

  .main-aside-right {
    padding: 0px 10px;
    // min-width: 300px;
    .el-card {
      margin-bottom: 10px;
      max-width: 300px;
    }
  }

  .query-box-class {
    // display: flex;
    // flex-direction: column;
    // justify-content:center;
    margin-bottom: 20px;
    // position:fixed;
    // top: 0;
    // z-index: 999;
  }

  .card-header {
    span {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .card-container {
    display: flex;
    flex-direction: column;
    // min-width: 1000px;
    // display: flex;
    // flex-direction: column;
    // justify-content:center;
    // flex: 1;
  }

  // 隐藏u-anchor自带的目录抬头
  :deep(.u-anchor .toc-content) {
    padding: 0px;
  }
  :deep(.u-anchor .toc-content-heading) {
    display: none;
  }
  :deep(.u-anchor .u-divider) {
    display: none;
  }

  @media (max-width: 768px) {
    .aside-box {
      display: none;
    }
  }
</style>
